<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="5">
        <div style="margin-bottom: 20px">
          <el-input
            v-model="searchText"
            placeholder="请输入农户姓名搜索内容"
            clearable
            @clear="getNhList"
          >
            <el-button
              slot="append"
              type="primary"
              size="mini"
              @click="getNhList"
              >搜索</el-button
            >
          </el-input>
        </div>
        <el-card>
          <div style="min-height: 50vh">
            <div v-if="nhList.length">
              <div
                class="nh-item"
                v-for="item in nhList"
                :key="item.nhId"
                @click="getnhjx(item)"
              >
                {{ item.nhxm }}
              </div>
            </div>
            <div v-else class="text-center">暂无数据</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="19">
        <el-card>
          <el-descriptions>
            <el-descriptions-item label="农户编号">{{
              nhItem.nhbh
            }}</el-descriptions-item>
            <el-descriptions-item label="农户姓名">{{
              nhItem.nhxm
            }}</el-descriptions-item>
            <el-descriptions-item label="技术级别"
              >{{ nhItem.jsjb }}
            </el-descriptions-item>
            <el-descriptions-item label="选择年度">
              <el-date-picker
                v-model="year"
                type="year"
                value-format="yyyy"
                format="yyyy"
                @change="selecctYear"
                size="mini"
                placeholder="选择年"
              >
              </el-date-picker>
            </el-descriptions-item>
            <el-descriptions-item label="种植计划">
              <el-select v-model="zzjh" size="mini" @change="getjxxx">
                <el-option
                  v-for="item in zzjhList"
                  :key="item"
                  :value="item.zzjhId"
                  :label="item.jhmc"
                  @click="zzjhmc = item.jhmc"
                ></el-option>
              </el-select>
            </el-descriptions-item>
            <!-- <el-descriptions-item label=""
              ><el-button type="primary" size="mini"
                >确定</el-button
              ></el-descriptions-item
            > -->
          </el-descriptions>
          <h3 class="zzjh-title">{{ zzjhmc }}</h3>
          <div style="padding: 20px 0">
            <el-descriptions border>
              <el-descriptions-item label="总收入"
                >{{ jxxx.jyje }}元</el-descriptions-item
              >
              <el-descriptions-item label="任务打分"
                >{{ jxxx.rwfs }}分</el-descriptions-item
              >
              <el-descriptions-item label="人工总支出"
                >{{ jxxx.rghsf }}元</el-descriptions-item
              >
            </el-descriptions>
          </div>
          <el-descriptions title="种植信息">
            <el-descriptions-item label="种植作物">{{
              jxxx.zzzw
            }}</el-descriptions-item>
            <el-descriptions-item label="种植面积"
              >{{ jxxx.dkmj }}亩</el-descriptions-item
            >
            <el-descriptions-item label="种植周期">
              {{ jxxx.szzqKs }} - {{ jxxx.szzqJs }}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="交易信息">
            <el-descriptions-item label="总交易量"
              >{{ jxxx.sjzl }}个</el-descriptions-item
            >
            <el-descriptions-item label="总交易额"
              >{{ jxxx.jyje }}元</el-descriptions-item
            >
          </el-descriptions>
          <el-descriptions title="任务打分情况">
            <el-descriptions-item label="任务数量"
              >{{ jxxx.rwsl }}个</el-descriptions-item
            >
            <el-descriptions-item label="平均分"
              >{{ jxxx.rwfs }}分</el-descriptions-item
            >
          </el-descriptions>
          <div class="des-title">
            人工核算费用: <span style="font-size: 16px">{{ jxxx.rghsf }}</span>
          </div>
          <div class="des-title">农资领用情况:</div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="nzbh" label="农资编号"> </el-table-column>
            <el-table-column prop="nzmc" label="农资名称"> </el-table-column>
            <el-table-column prop="gg" label="农资类型"> </el-table-column>
            <el-table-column prop="nzsl" label="使用数量"> </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "nhjx",
  dicts: ["jsjb"],
  data() {
    return {
      yearList: [],
      year: "",
      searchText: "",
      searchData: {},
      url: {
        nhList: "/jtnc/nhdagl/krNhdagl/select",
        zzjhList: "/jtnc/nhdagl/krNhdagl/selectZzjh",
        jxxx: "/jtnc/nhdagl/krNhdagl/jxxx",
      },
      nhList: [],
      zzjhList: [],
      nhItem: {},
      zzjh: "",
      zzjhmc: "",
      jxxx: {},
      tableData: [],
    };
  },
  created() {
    this.getNhList();
    this.getFiveYear();
    this.year = new Date().getFullYear() + "";
  },
  methods: {
    getFiveYear() {
      const date = new Date();
      const year = date.getFullYear();
      const years = [];
      for (let i = 0; i < 5; i++) {
        years.push(year - i);
      }
      this.yearList = years;
      this.year = year;
    },
    // 农户列表
    getNhList() {
      request({
        url: this.url.nhList,
        method: "get",
        params: {
          nhxm: this.searchText,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.nhList = res.data;
        }
      });
    },
    getnhjx(item) {
      this.nhItem = item;
      this.getzzjhList();
    },
    selecctYear() {
      this.getzzjhList();
    },
    // 种植计划
    getzzjhList() {
      request({
        url: this.url.zzjhList,
        method: "get",
        params: {
          nhId: this.nhItem.nhId,
          year: this.year,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.zzjhList = res.data;
          if (res.data.length) {
            this.zzjh = res.data[0].zzjhId;
            this.zzjhmc = res.data[0].jhmc;
          } else {
            this.zzjh = "";
            this.zzjhmc = "";
          }
          this.getjxxx();
        }
      });
    },
    // 绩效信息
    getjxxx() {
      if (!this.zzjh) {
        this.$message.error("未查询到种植计划");
        this.jxxx = {};
        return false;
      }
      request({
        url: this.url.jxxx,
        method: "get",
        params: {
          zzjhId: this.zzjh,
        },
      }).then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          this.jxxx = res.data;
          this.tableData = res.data.nzsyxxList;
        } else {
          this.jxxx = {};
          this.tableData = [];
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.nh-item {
  text-align: center;
  margin-bottom: 15px;
  cursor: pointer;
}
.zzjh-title {
  text-align: center;
  padding: 20px;
  border: 1px solid #e6e6e6;
}
.index-title {
  font-size: 22px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 20px 0;
}
.des-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #303133;
}
</style>
